<template>
  <div>
    <el-form :inline="true" class="demo-form-inline" @submit.native.prevent>
      <el-form-item label="商品">
        <el-input v-model="name" placeholder="商品名称关键字" @keyup.native.enter="search"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-divider content-position="left">商品列表</el-divider>
      <el-table :data="commondity">
        <el-table-column label="封面" prop="commondity_img" width="200px">
          <template slot-scope="scope">
            <img :src="scope.row.commondity_img" alt="" width="100px" >
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="commondity_name" width="300px" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column id="desc" label="介绍" prop="commondity_description" width="300px"
          :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="价格" prop="commondity_price" width="150px">
          <template slot-scope="scope">
            {{ scope.row.commondity_price }}元
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="commondity_state" width="200px">
          <template slot-scope="scope">
            <el-button v-if="scope.row.commondity_state == 1" type="success">审核通过</el-button>
            <el-button v-if="scope.row.commondity_state == 0" type="primary">未审核</el-button>
            <el-button v-if="scope.row.commondity_state == 2" type="danger">未通过</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220px" prop="commondity_id">
          <template slot-scope="scope">
            <el-row>
              <el-button type="warning" icon="el-icon-edit" circle
                @click="$router.push(`/home/commondity-update/${scope.row.commondity_id}`)"></el-button>
              <el-button type="danger" icon="el-icon-delete" circle
                @click="deleteCommondity(scope.row.commondity_id)"></el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination style="margin-top:20px;" background layout="->,prev, pager, next,jumper" :page-size="count"
        :current-page="page" :page-count="pagecount" @current-change="handleSizeChange($event)">
      </el-pagination>
    </div>
    <!-- <el-empty v-else description="暂无数据"></el-empty> -->
  </div>
</template>
  
<script>
import httpApi from '@/http';
export default {
  data() {
    return {
      commondity: [], //保存电影列表数据
      page: 1,
      count: 5,
      total: '',
      name: '',
      keyword: '',
      petshop_id: '',
      pagecount: null,

    };
  },
  methods: {
    listCommondity(pno) {
      let params = { petshop_id: this.petshop_id, pno, count: 5 }
      // console.log(params)
      httpApi.petshopApi.listShop(params).then(res => {
        console.log(res)
        this.commondity = res.data.data.data
        this.pagecount = res.data.data.pageCount

      })
    },
    listCommondityByName(name) {
      let params = { petshop_id: this.petshop_id, keyword: name }
      console.log(params)
      httpApi.petshopApi.queryListByNameId(params).then(res => {

        this.commondity = res.data.data
      })
    },
    handleSizeChange(page) {
      if (this.keyword.trim()) {
        this.listMoviesByName(this.keyword, page)
      } else {
        this.listCommondity(page)
        this.page = page
        console.log(this.page)
      }
    },
    search() {
      this.keyword = this.name
      if (this.keyword.trim()) {
        this.listCommondityByName(this.keyword)
      } else {
        this.listCommondity(1)
      }
    },
    deleteCommondity(id) {
      console.log(id)
      let params = { commondity_id: id }
      this.$confirm('此操作将删除商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        httpApi.petshopApi.delShop(params).then(res => {
          if (this.name.trim()) {
            this.listCommondityByName(this.name, this.page)
          } else {
            this.listCommondity(this.page)
          }
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
  mounted() {
    let user = this.$store.state.user
    this.petshop_id = (user[0].petshop_id)
    this.listCommondity(this.page)


  },
};
</script>
  
<style lang="scss" scoped>
.el-table .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

</style>